/**
 * create by young (young2f@outlook.com) on 2020/9/15
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, InputNumber, Popconfirm, Tabs} from 'antd';
import styles from '../index.less';
import {FormField, FormLayout} from 'antd-extra';

import ViewTitle from '../../components/ViewTitle';
import ComponentBase from '../../components/Base/ComponentBase';
import notify from "../../components/NotificationExtra";
import DraggableModal from "../../components/DraggableModal/DraggableModal";
import ModalCreateOrEditMaterial from "../store/modal/ModalCreateOrEditMaterial";
import ModalCreateOutboundLot from "../store/modal/ModalCreateOunboundLot";

const {TabPane} = Tabs;
const _ = require('lodash');
@Form.create()
@connect(({global, user, settings}) => ({...global, ...user, ...settings}))
export default class Index extends ComponentBase {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
    this.props.dispatch({
      type: 'settings/findSalesSettings', payload: {}
    });
  }

  modalRef = React.createRef();

  onMouseDown = (e) => {
    const modal = this.modalRef.current;
    if (!modal) return;

    const startX = e.clientX;
    const startY = e.clientY;
    const modalRect = modal.getBoundingClientRect();
    const startLeft = modalRect.left;
    const startTop = modalRect.top;

    const onMouseMove = (moveEvent) => {
      const deltaX = moveEvent.clientX - startX;
      const deltaY = moveEvent.clientY - startY;

      modal.style.left = `${startLeft + deltaX}px`;
      modal.style.top = `${startTop + deltaY}px`;
    };

    const onMouseUp = () => {
      document.removeEventListener('mousemove', onMouseMove);
      document.removeEventListener('mouseup', onMouseUp);
    };

    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };

  render() {
    const {_notify, salesSettings = {}, form} = this.props;
    const {title, ...modalProps} = this.props;
    if (_notify) {
      notify(_notify);
    }
    const {mgrFeeRatio = 0.08} = salesSettings;
    return (
      <div className={styles.content}>
        <Tabs defaultActiveKey="1">
          <TabPane tab="订单参数配置" key="1">
            <ViewTitle title={'订单参数配置'} actions={<Button type={'primary'}
                                                               onClick={() => {
                                                                 const payload = form.getFieldsValue();
                                                                 this.props.dispatch({
                                                                   type: 'settings/updateSalesSettings', payload
                                                                 }).then(res => {
                                                                   this.requestReturn(res);
                                                                   this.componentDidMount();
                                                                 });
                                                               }}
            >提交</Button>}></ViewTitle>
            <FormLayout form={form} cols={2}>
              <FormField
                label={'订单管理费用计算比例'}
                name={'mgrFeeRatio'}
                initialValue={mgrFeeRatio}>
                <InputNumber></InputNumber>
              </FormField>
            </FormLayout>
            <Button type="primary" onClick={() => {
              this.setState({
                visible: true
              });
            }}>测试可移动对话框</Button>
            {/*{<Popconfirm*/}
            {/*  title="慎用！确认清除所有采购、订单、库存数据？"*/}
            {/*  onConfirm={()=>{*/}
            {/*    this.props.dispatch({*/}
            {/*      type: 'global/clearTestData',*/}
            {/*      payload: {}*/}
            {/*    });*/}
            {/*  }}*/}
            {/*  okText="是"*/}
            {/*  cancelText="否"*/}
            {/*>*/}
            {/*<Button style={{marginLeft: '6px'}} type="primary" onClick={() => {*/}

            {/*}}>清除测试数据</Button></Popconfirm>}*/}
          </TabPane>
        </Tabs>

        <DraggableModal
          title="自定义拖拽测试"
          visible={this.state.visible}
          onOk={() => this.setState({visible: false})}
          onCancel={() => this.setState({visible: false})}
          width={1080}
        >
         <ModalCreateOutboundLot></ModalCreateOutboundLot>
        </DraggableModal>
      </div>
    );
  }
}
